<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>{{obj.name}}</div>
      <div v-if="obj.sex">{{obj.sex}}</div>
    </div>
    <script src="vue.js"></script>
    <script>
      // vue.component()
      //vue.filter()
      //vue.directive()
      //vue.mixin()
      // vue.set(obj,"key",value)

      var vm = new Vue({
        el: '#app',
        data() {
          return {
            msg: '消息',
            obj: {
              name: '小李',
              age: 2
            }
          }
        },
        methods: {},
        mounted() {
          // this.$set(this.obj, 'name', '小安')
          this.obj.name = '小赵'
          this.obj.sex = '男'
          console.log(this.obj)
        }
      })
      // 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，
      // 且触发视图更新。它必须用于向响应式对象上添加新 property，
      // 因为 Vue 无法探测普通的新增 property (比如this.myObject.newProperty = 'hi')

      // Vue.set(vm.obj, 'name', '小王')
      // Vue.delete( target, propertyName/index )
      // 删除vue数据中的属性
      Vue.delete(vm.obj, 'sex')
    </script>
  </body>
</html>
